<template>
	<view class="u-page u-share-page">
		<u-navbar  title="" back-text="经纪分享" :is-back="true"  :background="{ background: '#000' }" :back-text-style="{color:'#FFF'}" back-icon-color="#fff"> </u-navbar>
		<view class="head">
			<view class="imgs flex">
				<view class="img-warp col center">
					<view class="img"> </view>
				</view>
				<view class="img-warp col center">
					<view class="img"> </view>
				</view>
			</view>
		</view>
		<canvas class="canvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" canvas-id="myCanvas"></canvas>
		<tabBar />
	</view>
</template>

<script>
	/*
	 http://house-detective.oss-cn-guangzhou.aliyuncs.com/center-bg.png
	 后端图不全 以及 getSystemInfoSync() 获取设备宽度有误差 
	 https://blog.csdn.net/qq_42543264/article/details/116982118
	*/
	import drawQrcode from 'weapp-qrcode-canvas-2d'
	export default {
		name: "desc",
		data() {
			return {
               canvasWidth: 0, canvasHeight: 0
			};
		},
		created() {
			
			// https://uniapp.dcloud.io/api/system/info.html
            var { screenWidth, screenHeight, windowWidth, windowHeight,devicePixelRatio } = uni.getSystemInfoSync()
			this.pixelRatio =  devicePixelRatio; 
			this.width = uni.upx2px(750) * this.pixelRatio;
			this.height = uni.upx2px(448) * this.pixelRatio;
			
			console.log("加载", this.height ,this.width  );
				
			console.log("加载的系统信息=", { devicePixelRatio,screenWidth, screenHeight, windowWidth, windowHeight }  );
			this.width =  screenWidth
			this.height =  screenWidth
			this.load()
		},
		methods: {
			async load() {
				var th = this;
				var api = await this.ajax('/wx/property/sharePersonalCenter')
				console.log("base64=", api);
				
				const ctx = wx.createCanvasContext('myCanvas', this)
				uni.getImageInfo({
						src: api.data,
						success: info => {
							// 根据 图片的大小 绘制底图 的大小
							let imgW = info.width - 300;
							let imgH = info.height - 360;
							this.canvasWidth = imgW;
							this.canvasHeight = imgH;
							ctx.drawImage(api.data, 0, 0, imgW, imgH)
							
							// 绘制文本
							ctx.font = "15px Medium"; // 字体大小
							ctx.fillStyle = '#FFFFFF'; //字体填充颜色
							ctx.fillText(res.data.user_nickname, 80, 110);
							
							ctx.font = '11px Regular';			// 字体大小
							ctx.fillStyle = '#FFBFB8',			// 字体填充颜色
							ctx.fillText('邀请你使用懂体验商城，不仅能体', 80, 130)
							
							ctx.font = '11px Regular';			// 字体大小
							ctx.fillStyle = '#FFBFB8',			// 字体填充颜色
							ctx.fillText('验产品不踩坑，还能购物领红包！', 80, 146)
							 
							
							// 绘制裁剪头像为圆形
							let radius,diameter
							let width = 40;			// 头像宽度
							let height = 40;		// 头像高度
							let x = 30;			// 头像显示位置
							let y = 100;			// 头像显示位置
							if (width > height) {
								radius = height / 2;
							} else {
								radius = width / 2;
							}
							diameter = radius * 2;
							ctx.beginPath();
							ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2, false);
							ctx.clip();
							ctx.strokeStyle = "#ff6352";			// 改变边框颜色
							ctx.drawImage(this.userInfo.avatar, x, y, diameter, diameter);
						}
					})
					setTimeout(function() {		// uni-app必须加上延迟，不然显示不出来， 亲测 
						ctx.stroke();
						ctx.draw() //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示
					}, 100) 
				 
 
			},
			  
		}
	}
</script>

<style lang="scss">
	.u-share-page {


		.head {
			font-size: 12px;
			color: #000;
			padding: 20px;
			border: 1px solid #DFDFDF;
			margin: 5px;
			border-radius: 4px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/share-top.png) center center / 100% 100%;
		}

		.imgs {
			justify-content: center;
			margin-top: 20px;
		}

		.img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin: 10px;
		}

		.info-imgs {
			align-items: center;
		}

		.infos {
			margin-top: 40px;
			background-color: #444444;
			flex: 1;
			color: #ccc;
		}


	}
</style>
